<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>练习</title>
    <script src="<%=basePath%>jquery/jquery-3.2.0.min.js"></script>
    <link href="<%=basePath%>bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="<%=basePath%>bootstrap-3.3.7/js/bootstrap.js"></script>

    <script  type="text/javascript">
// type="text/javascript" 不要写错了，要不然断点都进不去

        $(function () {
            $("#inputEmail").focus();//输入焦点
            $("#inputEmail").keydown(function (event) {
                if (event.which == "13") {//回车键,移动光标到密码框
                    $("#inputPassword").focus();
                }
            });
            $("#inputPassword").keydown(function (event) {
                if (event.which == "13") {//回车键，用.ajax提交表单
                   $("#submitLogin").trigger("click");
                }
            });
            $("#submitLogin").click(function () { //“登录”按钮单击事件
                //获取用户名称
                var strTxtName = encodeURI($("#inputEmail").val());
                //获取输入密码
                var strTxtPass = encodeURI($("#inputPassword").val());
                if(strTxtName == null || $.trim(strTxtName) == ""){
                    alert("用户ID必须输入,不能为空(格)!");
                    return;
                }
                if(strTxtPass == null || $.trim(strTxtPass) == ""){
                    alert("用户密码必须输入,不能为空(格)!");
                    return;
                }
                $.ajax({
                    type:"post",    //请求方式
                    async:true,    //是否异步(默认true 可不写)
                    url: "<%=basePath%>ganhx/loginsuccess",
                    data:"{'aac001':'001,'aac003':'ganhx'}",
                   // dataType:"jsonp",    //跨域json请求一定是jsonp
                    success:function(data, status){
                        alert("回调函数！"+data);
                    },
                   error:function(XMLHttpRequest,err,status){
                        alert("错误回调！"+err);
                    }
                });
            });

            $("#btnClose").click(function () { //“登录”按钮单击事件
                location.href = "login.jsp";//location.href实现客户端页面的跳转
            });
            $("#btnCheck").click(function () {
                var strTxtName = encodeURI($("#inputEmail").val());
                if(strTxtName == null ||  $.trim(strTxtName) == '') {
                    alert("用户ID必须输入,不能为空(格)!");
                    return;
                }else {
                    if(strTxtName == "2") {
                        alert("用户名已被使用，请换一个!");
                        return;
                    }else{
                        $.ajax({
                            type:"post",    //请求方式
                            async:true,    //是否异步(默认true 可不写)
                            url: "<%=basePath%>ganhx/checkUser",
                            data:{"aac001":"001","aac003":"ganhx","inputEmail":strTxtName},
                            // dataType:"jsonp",    //跨域json请求一定是jsonp
                            datatype:"json",
                            success:function(data, status){
                                var result= eval("("+data+")");
                               // alert(result.returnData);
                                document.getElementById("divcheck").innerHTML = result.returnData;
                            },
                            error:function(err,status){
                                alert("错误回调！"+err);
                            }
                        });
                    }
                }
            });
        })


    </script>
    <%--   <style>
           body
           {
               background:url(<%=basePath%>images/backgroup.jpg);
               frameborder:0;
               background-repeat:no-repeat;
               padding-top:80px;
           }
       </style>--%>
</head>


<body>
<%--固定宽度--%>
<div class="container">
    <%--占用全屏的用container-fluid--%>
    <form>
        <img src="<%=basePath%>images/cirle-rouned.jpg"  class="img-circle" height="120px" width="120px">
        <div class="form-group">
            <label for="inputEmail">登录名</label>
            <input type="email" class="form-control" id="inputEmail"  name="inputEmail" placeholder="输入你的邮箱/用户ID" width="150px">
            <button type="button" class="btn btn-primary" name="btnCheck" id="btnCheck">检测</button>
            <div id="divcheck"></div>
        </div>
        <div class="form-group">
            <label for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="这是输入密码的位置">
        </div>
        <button type="button" class="btn btn-primary btn-lg active" id="submitLogin" name="submitLogin">提交</button>
        <button type="button" class="close" aria-label="Close" id="btnClose" name="btnClose"><span aria-hidden="true">&times;</span></button>
    </form>
</div>
</body>
</html>
